<!DOCTYPE html>
<html>
<head>
  <title>W3TestRunner</title>
  <script src="/testrunner/jquery-1.3.2.js"></script>
  <script src="/testrunner/jquery.jsonrpc.js"></script>
  <!-- For debug
  <script type='text/javascript'
          src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
  -->
  <script src="/testrunner/class.js"></script>
  <script src="/testrunner/runners.js"></script>
  <script src="/testrunner/testrunner.js"></script>
  <link rel="stylesheet" type="text/css" href="/testrunner/testrunner.css">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
  <div class="statusLine">
    <ul class="statusInfo statusInfoTop">
      <li>batch mode: <span id="batchMode"></span></li>
      <li>pass: <span id="passCount"></span></li>
      <li>fail: <span id="failCount"></span></li>
      <li>other: <span id="otherCount"></span></li>
      <li>done/total: <span id="doneCount"></span>/<span
                            id="totalCount"></span></li>
    </ul>
    <div id="progressBarContainer">
      <div id="progressBar"></div>
    </div>
    <ul>
      <li>Status: <span id="status"></span> <span id="statusMessage"></span></li>
    </ul>
  </div>
  <div class="statusLine">
    <ul class="statusInfo actions">
      <li class="testStatus" id="testStatus"></li>
      <li>Actions:</li>
      <li><button id="startButton">Start</button></li>
      <li><button id="stopButton">Stop</button></li>
      <li><button id="loadTestsButton">Load Tests</button></li>
      <li><button id="saveResultsButton">View/Save Results</button></li>
      <li><button id="clearResultsButton">Clear Results</button></li>
      <li><button id="resetButton">Reset</button></li>
    </ul>
    <ul>
      <li>Current test: <span id="currentTest"></span></li>
    </ul>
  </div>

  <div class="frameholder">
    <div id="framelocator"></div>
    <iframe scrolling="no" frameborder="0" id="testframe"
            width="800" height="500"></iframe>
  </div>

  <table id="testsTable">
    <thead>
      <tr>
        <th>Status</th>
        <th>Type</th>
        <th>Information</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <div class="footer">
    <a href="http://code.google.com/p/browsertests/wiki/StartPage#Running_the_tests"
    >About W3TestRunner</a> |
    <a href="http://code.google.com/p/browsertests/issues/list">Report a Bug</a> |
    <a href="http://groups.google.com/group/browsertests">Mailing List</a> |
    <a href="http://code.google.com/p/browsertests/source/checkout">Get the Source</a>
  </div>

  <div id="loadTestsBox" class="messageBox hidden">
    <h1>Welcome to the W3TestRunner</h1>
    <p>
      Please enter below the path to the directory on your local file system
      that contains the tests you want to run. This will clear any tests
      already loaded.
    </p>
    <p>
      <input type="text" id="testsPath">
    </p>
    <p>
      <button id="loadLocalTestsButton">Load tests</button>
    </p>
    <p class="error" id="loadTestsError">

    </p>
    <p>
      NOTE: you can also use the <code>--tests-path PATH</code> command line
      argument to automatically load the tests at the given PATH.
    </p>

    <!--
      TODO: interface for loading tests from a Web server.
    -->
  </div>

  <div id="errorBox" class="messageBox hidden">
    <h1 class="error">An error occurred</h1>

    <p>An unrecoverable error happened, the tests are stopped. You can still
    view or save the results for the tests that were run, but the test run will
    be flagged as an error.</p>
    <p>You should press the Reset button or load tests to continue running
    tests.</p>
    <h2>Error detail:</h2>
    <p id="errorDetail">
    </p>
  </div>

  <div id="screenShotFailure" class="messageBox hidden">
    <h1 style="color: orange">Screenshot Failure</h1>

    <p>A screenshot was taken for running the current Reftest but the
    application failed to locate the frame containing the test.</p>
    <p><b>Server Error message:</b>
      <span id="screenShotFailureErrorMessage"></span>
    </p>
    <p>Try to make the test frame visible and then try again:</p>
    <p>
      <button style="font-size: larger;" id="reftestContinueButton">
        Try again and continue running tests</button>
    </p>
    <p>To help you identify the issue, you can check
      <a id="screenshotImageLink" href="#" target="_blank">
        the captured screenshot image</a>.
    </p>
  </div>

  <div id="resultDetail" class="messageBox hidden">
    <h1>Result Detail</h1>

    <dl>
      <dt>Test identifier:</dt>
      <dd id="resultDetailTestId"></dd>
      <dt>Test type:</dt>
      <dd id="resultDetailTestType"></dd>
      <dt>Status:</dt>
      <dd id="resultDetailStatus"></dd>
      <dt>Status Message:</dt>
      <dd id="resultDetailStatusMessage"></dd>
    </dl>
    <div class="typeSpecific mochitest browsertest">
      <dl>
        <dt>Pass count:</dt>
        <dd id="resultDetailPassCount"></dd>
        <dt>Fail count:</dt>
        <dd id="resultDetailFailCount"></dd>
        <dt>Log:</dt>
        <dd>
          <div id="resultDetailLog"></div>
        </dd>
      </dl>
    </div>
    <div class="typeSpecific reftest">
      <dl>
        <dt>Comparison type:</dt>
        <dd id="resultDetailTestEqual"></dd>
        <dt>Pixel diff:</dt>
        <dd id="resultDetailPixelDiff"></dd>
        <dt>Image 1:</dt>
        <dd>
          <a id="resultDetailTestUrl1" href="#" target="_blank"></a>
          <br><br>
          <img id="resultDetailImage1" src="">
        </dd>
        <dt>Image 2:</dt>
        <dd>
          <a id="resultDetailTestUrl2" href="#" target="_blank"></a>
          <br><br>
          <img id="resultDetailImage2" src="">
        </dd>
        <dt>Image Diff:</dt>
        <dd><img id="resultDetailImageDiff" src=""></dd>
      </dl>
    </div>
  </div>

  <div id="viewSaveResults" class="messageBox hidden">
    <h1>View / Save Results</h1>
    <p id="viewSaveResultsCompletedMessage">
      The tests have completed. You can now view a report of the results or
      upload them to the test server (feature not yet available).
      If you close this message box, you can view more details about tests
      and results or load and run new tests.
    </p>
    <h2>HTML report</h2>
    <p>
      <a href="/report" target="_blank">View a HTML report of the tests</a>
    </p>
    <h2>Upload results</h2>
    <p>feature not yet available</p>
  </div>

  <div id="initializingBox" class="messageBox">
    <h1>Initializing</h1>
    <p>Please wait <span id="initializingDots"></span>
  </div>

</body>
</html>
